display: grid(網格排版)

設定後，會使得所設定元件的「子元件」，可以在橫列與直行上排列（2D排列），藉由橫列或直行的設定，把畫面呈現如同切成一格一格的網格，並且可以控制子元件在網格中的對齊，與2D空間上的分配。

主要用於複雜版面的設計，常見於表格、相簿或是表單填寫，基本上可以做到任何格式的2維排版，如同報紙般

通常需搭配以下屬性：

• grid-template-columns：控制直行的寬度空間，雖然可以直接指定寬度(px)，但對於排版跑版的預防，設定份數(fr)會是比較好的選擇。
  • 如grid-template-columns: 1fr 2fr 1f，代表總共直行寬度總共有4份，第一直行分1份、第二直行分2份，第三直行分1份的寬度。
  • 可使用repeat(3, 1fr)語法，代表1fr 1fr 1fr。
  • 可搭配minmax()函數，來決定最小及最大可佔據直行寬度。
• grid-template-rows：控制橫列的高度空間，語法基本同grid-template-columns，差別在於分配垂直的高度空間
• grid-column：控制子元件的跨欄設定，類似於excel的合併置中
  • 語法為grid-column: start / end;，start代表跨欄的起始欄位線，end代表跨欄到的終點欄位線。
  • 欄位線是一個虛擬的線，乃依據上述grid-template-columns的直行切分而定，若切出3個直行空間，則需要有4條欄位線來間隔出此3個直行空間。
  • 如grid-column: 1 / 3;，代表由第1欄位線，橫跨到第3欄位線，因此會橫跨2個直行空間。
  • 也可以寫成grid-column: 1 / span 2;，代表由第1個欄位線，橫跨2個直行空間
  • 若寫成grid-column: span 2;，代表橫跨2個直行空間，但未指定起始欄位線。某些情況下會與前面的寫法呈現不同結果
• grid-row：控制子元件的跨列設定，語法基本同grid-column，差別在於橫跨的是垂直的列高空間
  • 因為有跨欄及跨列設定，display: grid;基本可以做到任何格式的排版設計
• gap：控制子元件之間的間距，可以用row-gap、column-gap，分別就橫列、直行間距進行控制
• place-items：控制子元件的對齊軸線排列，相當於同時設定align-items(垂直軸)及 justify-items(水平軸)
  • 語法如place-items: <align-items> <justify-items>;
  • 如place-items: center;，代表align-items: center; justify-items: center;
  • 如place-items: start end;，代表align-items: start;(向上對齊)，及justify-items: end;(向右對齊)

網格排版(grid)，基本上可以想成是彈性盒子(flex)的2維版本，但可以做到任何切分的設計，因此排版彈性上相當大，對於有平面設計需求者，是相當方便的CSS設定。一般用途上，在表格的呈現上，也可使用網格排版設定，雖然語法上會比html既有的表格元件，如<table>、<tr>、<td>等來得複雜些，但因此獲得的彈性設計變化，絕對是值得學習網格排版的好理由。